import { ExclamationCircleFilled, PlusCircleFilled } from '@ant-design/icons'
import { Modal, Row, Spin, message } from 'antd'
import HomeCard from '../../components/HomeCard'
import './index.css'
import { useEffect, useState } from 'react'
import { get } from 'http'
import {  deleteVehicle, getDriversCountByStatus, getVehiclesCountByStatus, getVehiclesInfoList, getVehiclesMileList, getVehiclesUseTimesList } from './services'
import { use } from 'echarts'
import { useNavigate } from 'react-router-dom'
import { Columns } from '../../components/HomeCard/constant'

export default function VehicleAnalysis() {
  const navigate = useNavigate();
  /** 车辆 */
  const [vehiclesInfo, setVehiclesInfoList] = useState([])
  const [vehicleStatus, setVehicleStatus] = useState([])
  const [driverStatus, setDriverStatus] = useState([])
  const [useInfo, setUseInfo] = useState([])
  const [mileageInfo, setMileageInfo] = useState([])

  const [loading, setLoading] = useState(false)

  const { confirm } = Modal;

  useEffect(() => {
    setLoading(true)
    // 获取车辆信息
    // 获取车辆状态
    // 获取驾驶员状态
    // 获取用车信息
    // 获取车辆里程信息
    const queryList = async () => {
      await getVehiclesInfoList()
        .then(res => {
          setVehiclesInfoList(res.data.data)
          // console.log(res.data.data)
        })
      await getVehiclesCountByStatus()
      .then(res=>{
        setVehicleStatus(res.data.data);
      })
      await getDriversCountByStatus()
      .then(res=>{
        setDriverStatus(res.data.data);
      })
      await getVehiclesMileList()
      .then(res=>{
        setMileageInfo(res.data.data);
      })
      await getVehiclesUseTimesList()
      .then(res=>{
        setUseInfo(res.data.data);
      })
      .finally(()=>{
        setLoading(false)
      })
      
    }
    queryList()
   
  }, [])

  return (
    <div className="home-content">
      <div className="home-title-container">
        <div className="home-title">车辆管理系统</div>
      </div>
      <div className="detail">
        适用于企业的车辆管理系统，包括：车辆、驾驶员档案、用车申请、出车记录、加油管理、维修保养管理、违章事故、年检保险等几大方面。<span style={{ color: '#f3d412', fontWeight: 'bold' }}>在PC和移动端动态掌握车辆和驾驶员状态，提高车辆使用效率，降低管理难度。</span>
      </div>
      <Spin spinning={loading}>
      <div className="card-list">
      <HomeCard title="车辆、管理员状态" type="cards" dataSource={[...vehicleStatus,...driverStatus]} />
      </div>
      <div className="card-list">
        <HomeCard title="车辆明细" type="table" 
        columns={[...Columns,  {
          title: '操作',
          fixed: 'right',
          render: (record:any) => <a style={{color:"#fc5530"}}
          onClick={
            ()=>{
              confirm({
                title: `删除提醒`,
                icon: <ExclamationCircleFilled />,
                content: `您确认要删除车辆 ${record.vehicle_id} 吗?`,
                async onOk() {
                  console.log('OK');
                  await deleteVehicle({"vehicle_id":record.vehicle_id}).then(async res=>{
                    console.log(res.data)
                    if(res.data.result==="SUCCESS"){
                      message.success( '删除成功');
                    }
                    setLoading(true)
                    await getVehiclesInfoList()
                    .then(res => {
                      setVehiclesInfoList(res.data.data)
                      // console.log(res.data.data)
                    })
                    .finally(()=>{
                      setLoading(false)
                    })
                }
                  )
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
  
             
            }
        }>删除</a>,
        },]}
        dataSource={vehiclesInfo} />
      </div>
   
      <div className="card-list">
        <HomeCard title="车辆里程" type="bar" dataSource={mileageInfo} />
        <HomeCard title="车辆出车统计" type="line" dataSource={useInfo} />
      </div>
      
      </Spin>
    </div>
  )
}
